<template>
  <view>

    <!--   <my-search @inputsearch="inputsearch" ></my-search>
 -->

    <view class="" style="background: #a40100;">
      <uni-search-bar @input="inputsearch" @confirm="confirm" :cancelButton="none" :radius="100"></uni-search-bar>
    </view>

    <view v-if="keyVal==''"  class="history">
      <view class="title">
        <text>搜索历史</text>
        <view class="">
          <text @click="flagAllHandle" v-if="flagAll">全部删除</text>
          <uni-icons @click="flagAll=true" type="trash" size="13"></uni-icons>
        </view>
      </view>

      <view class="container">
        <!-- <uni-tag type="default" text="标签" @click="bindClick" size='small'></uni-tag> -->
        <!-- <button type="default" size="mini">按钮</button>
         <button  size="mini">按钮</button> -->
        <!-- 历史记录 -->
        <view v-for="(item,index) in  historyData" :key="index" class="" style="margin:0 10px;">
          <navigator :url='"../goods_list/goods_list?query="+item' style="padding:10px 0;display: inline-block;">{{item}}</navigator>
          <uni-icons @click="delHis(index)" type="closeempty" size="13"></uni-icons>
        </view>

      </view>
    </view>
    
    <view v-else> 
      <view style="padding:10px; " class="text-line" v-for="(item,index) in searchQueryList" :key="index">
        <navigator style="font-size: 12px;display: block;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;" :url='"../goods_detail/goods_detail?goods_id="+item.goods_id'>
          {{item.goods_name}}
          
        </navigator>

        
      </view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        flagAll: false,
        historyData: [],
        keyVal: '',
        searchQueryList: []

      };
    },
    onLoad() {
      wx.getStorage({
        key: 'kv',
        success: ({
          data
        }) => {
          console.log(data, 1111)
          this.historyData = data;
        }
      })
    },
    methods: {
      flagAllHandle() {
        this.historyData = [];
        //  清除本地缓存
        wx.setStorage({
          key: "kv",
          data: []
        })

      },
      async getSearchQueryList(q) {
        const res = await uni.$http.get('/api/public/v1/goods/qsearch?query=' + q)
        //console.log(res, 99888)
        this.searchQueryList = res.data.message
      },
      inputsearch(e) {
        console.log(e, 99888)
        this.keyVal=e;
        if (!e.trim().length) return wx.showToast({
          title: '请输入搜索内容',
          icon: 'error',
          duration: 500
        })
        
        

        //  输入的时候触发
        //  建议 
        //  获取表单值  +  发送请求   +  展示数据
        // console.log(e,6666);
        setTimeout(() => {
          this.getSearchQueryList(e)
        }, 500)
      },
      confirm(e) {
        //  回车   历史的

        //  获取表单数据+  存储数据
        this.keyVal = e.value;
        this.historyData = [e.value, ...this.historyData]

        wx.setStorage({
          key: "kv",
          data: this.historyData
        })

      },
      delHis(index) {
        //  删除

        this.historyData.splice(index, 1) //  根据索引删除

        wx.setStorage({
          key: "kv",
          data: this.historyData
        })
      }

    }
  }
</script>

<style lang="scss">
  .text-line{
    position: relative;
  }
  .text-line::before{
    content:'>';
    position: absolute;
    right:3px;
    top:5px;
  }
  .container {
    display: flex;
    flex-wrap: wrap;
  }

  .history {
    padding: 10px;

    .title {
      display: flex;
      justify-content: space-between;
      font-size: 12px;


    }
  }
</style>
